<template>
  <div class="bigContainer">
    <el-row>
      <el-col :span="24">
        <div class="topHeader">我是顶部的留白</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="gradeSpan" :offset="gradeOffset">
        <el-container class="grade-header-main-foot">
          <!-- 设置头部信息 -->
          <el-header style="height:400px; background-color: #F6F6F6">
            <div class="headerHandle">
              <!-- 第一行row的设置 -->
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="topImageName-box">图片名字区域</div>
                </el-col>
                <el-col :span="6" :offset="6">
                  <div class="topToDo-box">操作按钮区域</div>
                </el-col>
              </el-row>
            </div>
            <div class="headerContent">
              <!-- 第二行设置区域 -->
              <el-row>
                <el-col>
                  <div class="content row1-col">UNOFFICIAL TRANSCRIPT</div>
                </el-col>
              </el-row>
              <!-- 第三行设置区域 -->
              <el-row :gutter="20">
                <el-col>
                  <div class="content row2-col">Printed on 2020/09/23</div>
                </el-col>
              </el-row>
              <!-- 第四行设置区域 -->
              <el-row :gutter="20">
                <el-col>
                  <div class="content row3-col">Issued To:</div>
                </el-col>
              </el-row>
              <!-- 第五行设置区域 -->
              <el-row :gutter="20">
                <el-col>
                  <div class="content row4-col">
                    "Xiangchao Liao &#12288; &#12288; &#12288; #1565416"
                  </div>
                </el-col>
              </el-row>
              <!-- 第六行设置区域 -->
              <el-row :gutter="20">
                <el-col>
                  <div class="content row5-col">Course Level: Postgraduate</div>
                </el-col>
              </el-row>
              <!-- 第七行设置区域 -->
              <el-row :gutter="20">
                <el-col>
                  <div class="content row6-col">Current Program</div>
                </el-col>
              </el-row>
              <!-- 第八行设置区域 -->
              <el-row :gutter="20">
                <el-col>
                  <div class="content row7-col">Major: Marketing</div>
                </el-col>
              </el-row>
              <!-- 第九行设置区域 -->
              <el-row>
                <el-col>
                  <div class="content row8-col">
                    Degree Awarded Master of Business Administration
                  </div>
                </el-col>
              </el-row>
              <!-- 第十行设置区域 -->
              <el-row>
                <el-col>
                  <div class="content row9-col">Primary Degree</div>
                </el-col>
              </el-row>
              <!-- 第十一行设置区域 -->
              <el-row>
                <el-col>
                  <div class="content row7-col">Major: Marketing</div>
                </el-col>
              </el-row>
            </div>
          </el-header>
          <el-main>

            <el-row>
              <el-col :span="6">
                <div class="content table-header">SUBJ NO.</div>
              </el-col>
              <el-col :span="6">
                <div class="content table-header">COURSE TITLE.</div>
              </el-col>
              <el-col :span="6">
                <div class="content table-header">CRED GRD.</div>
              </el-col>
              <el-col :span="6">
                <div class="content table-header">PTS R.</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <div class="content table-header">***************************************************************************************************************************************************************</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <div class="content table-header">COURSE INFORMATION</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <div class="content table-header">Spring Qtr 2017 &#12288; &#12288; &#12288; Graduate</div>
              </el-col>
            </el-row>
            <el-table
              :data="tableDatas"
              :show-header = "false"
              style="width:100%" >
              <el-table-column prop="subj_no" label="SUBJ NO."></el-table-column>
              <el-table-column prop="course_title" label="COURSE TITLE."></el-table-column>
              <el-table-column prop="cred_gpr" label="CRED GRD."></el-table-column>
              <el-table-column prop="pts_r" label="PTS R."> </el-table-column>
            </el-table>
            <el-row>
              <el-col>
                <div class="content table-Botton1">TERM CREDITS PASSED: 20.00 &#12288; &#12288; &#12288; TERM GPA CREDITS: 20.00</div>

              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <div class="content table-Botton2">TERM GRADE POINTS : 45.36 &#12288; &#12288; &#12288;TERM GPA &#12288;: 3.78</div>
              </el-col>
            </el-row>

            <el-row>
              <el-col>
                <div class="content table-header">Summer Qtr 2017 &#12288; &#12288; &#12288; Graduate</div>
              </el-col>
            </el-row>
            <el-table
              :data="tableDatas"
              :show-header = "false"
              style="width:100%" >
              <el-table-column prop="subj_no" label="SUBJ NO."></el-table-column>
              <el-table-column prop="course_title" label="COURSE TITLE."></el-table-column>
              <el-table-column prop="cred_gpr" label="CRED GRD."></el-table-column>
              <el-table-column prop="pts_r" label="PTS R."> </el-table-column>
            </el-table>
            <el-row>
              <el-col>
                <div class="content table-Botton1">TERM CREDITS PASSED: 20.00 &#12288; &#12288; &#12288; TERM GPA CREDITS: 20.00</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <div class="content table-Botton2">TERM GRADE POINTS : 45.36 &#12288; &#12288; &#12288;TERM GPA &#12288;: 3.78</div>
              </el-col>
            </el-row>

          </el-main>
          <el-footer>
            <el-row>
              <el-col>
                <div class="content table-header">*************************************************************** <span
                >END OF STUDENT LEVEL</span
              > ************************************************************</div>
              </el-col>
            </el-row>

            <el-row>
              <el-col>
                <div class="content table-header">******************************************************************<span
                >END OF TRANSCRIPT</span
              >***************************************************************</div>
              </el-col>
            </el-row>

          </el-footer>
        </el-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userHeader: {
        course_level: "Postgraduate",
        date: "20200928",
        degree: "Awarded Master of Business Administration",
        issued_to: "Dwayne Johnson #2020092114525543148",
        maj_name: "Computer"
      },
      userModel: {},
      tableDatas: [
        {
          course_title: "55554",
          cred_gpr: "55554",
          pts_r: "55554",
          subj_no: "55554"
        }
      ],
      screenWidth: document.body.clientWidth,
      gradeSpan: 16,
      gradeOffset: 4
    };
  },
  methods: {
    //获取学生成绩信息
    async getSutdentInfo() {
      var url = this.$urls.GradeInfo;
      var token = window.sessionStorage.getItem("token");
      const { data: res } = await this.$http1(url, token);
      console.log(res.Result);
      this.userModel = res.Result;
      this.tableDatas = this.userModel.middle[1].courses;
      console.log(this.tableDatas);
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        if (columnIndex === 0) {
          return [1, 4];
        } else {
          return [0, 0];
        }
      }
    }
  },
  created() {
    console.log("页面发生变化后都会来");
    //进入页面获取数据
    this.getSutdentInfo();

    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenWidth = window.screenWidth;
        console.log("屏幕宽度" + this.screenWidth);
        var isTrue = this.screenWidth <= 600;
        this.gradeSpan = isTrue ? 24 : 16;
        this.gradeOffset = isTrue ? 0 : 4;
      })();
    };
  }
};
</script>

<style>
.bigContainer {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}
.topHeader {
  background-color: #f6f6f6;
  height: 100px;
}
.grade-header-main-foot {
  height: 100%;
}

.demo_line_01 .demo_line_02 .demo_line_03 {
  letter-spacing: -1px;
  color: #ddd;
}
.demo_line_01 span {
  letter-spacing: 0;
  color: #222;
  margin: 0 20px;
}
.demo_line_02 span {
  letter-spacing: 0;
  color: #222;
  margin: 0 20px;
}
.demo_line_03 span {
  letter-spacing: 0;
  color: #222;
  margin: 0 20px;
}
.el-row {
  margin-bottom: 5px;
}

.headerContent {
  margin-top: 15px;
}
.content {
  /* background-color: #d3dce6; */
  border-radius: 4px;
  text-align: left;
  padding: 5px;
  font-size: 14px;
}
.table-Botton1 {
  margin-top: 20px;
}
.table-Botton2 {
  margin-bottom: 20px;
}
.row4-col {
  padding-left: 40px;
}
.row7-col {
  padding-left: 75px;
}
.topImageName-box {
  line-height: 50px;
  background-color: cadetblue;
  margin-top: 10px;
}
.topToDo-box {
  line-height: 50px;
  background-color: cadetblue;
  margin-top: 10px;
}
</style>
